<template>
    <div class="city">
        <!-- getCityInfo -->
        <h3>国内31省市区本土疫情速报</h3>
        <div class="nav">
            <van-row>
                <van-col span="7">地区</van-col>
                <van-col span="3">本土确诊</van-col>
                <van-col span="4">本土<br/>无症状</van-col>
                <van-col span="4">高风险地区</van-col>
                <van-col span="6">更新<br/>时间</van-col>
            </van-row>
        </div>
        <div class="content">
            <div v-for="(item,index) in cityList" :key="index" class="line">
                <van-row @click="changeLine(index,item.adcode)">
                    <van-col span="7" class="cityname">
                        {{item.city}}
                        <span v-if="!(item.city==item.province)">{{item.province}}</span>
                    </van-col>
                    <van-col span="3">{{item.local_confirm_add | time}}</van-col>
                    <van-col span="4">{{item.local_wzz_add | time}}</van-col>
                    <van-col span="4">{{item.highRiskAreaNum}}</van-col>
                    <van-col span="6">今日 {{item.mtime | mydate}}</van-col>
                </van-row>
                <!-- 图表 -->
                <div v-if="index==num" class="tubiao">
                    <h4> {{item.city}}图表</h4>
                    <div id="item" style="width:7rem;height:3.6rem;"></div>
                </div>
            </div>

        </div>
        <div v-if="flag" class="more" @click="getMore">获取更多</div>
        <div v-else class="more" @click="getMore2">点击收起</div>

    </div>
</template>



<script>
import moment from 'moment';
    export default{
        data(){
            return{
                cityList:[],//默认城市
                list:[],//所有城市省份
                page:0,
                flag:true,
                num:0
            }
        },
        created(){
            this.getCityInfo();
        },
        methods:{
            //点击row控制显示下面的图表
           async changeLine(index,adCode){ 
                this.num = index;
                let res = await this.$api.getCityData({adCode})
                console.log("获取城市的数据",res.data);
                 let arr = res.data.data;
                 let xData = []
                 let yData = []
                 arr.forEach(ele => {
                    xData.push(ele.date)
                    yData.push(ele.confirm_add)
                 });
                 //绘制折线图
                 this.$mycharts.line('item',xData,yData)
             },
            // 点击获取更多城市数据
            getMore(){
                this.page++;
                console.log(this.page);
                //判断获取所有的数据---终点----list长度 --- 
                let max = Math.ceil((this.list.length-5)/10)
                if(this.page>max){
                    this.flag=false;
                    return '';
                }
                this.cityList = this.list.slice(0,5+this.page*10)
            },
            //点击收起
            getMore2(){
                this.cityList =this.list.slice(0,5);
                this.flag=true;
                this.page=0;
            },
            // 获取数据---------
            async getCityInfo(){
                let res = await this.$api.getCityInfo();
                let list = res.data.data.localCityNCOVDataList;

                console.log('---省份数据',list);
                this.cityList = list.slice(0,5);
                this.list = list;
                 //获取第一个城市的数据----
                 let resCity = await this.$api.getCityData({adCode:list[0].adcode })
                 console.log("获取第一个城市的数据",resCity.data);
                 let arr = resCity.data.data;
                 let xData = []
                 let yData = []
                 arr.forEach(ele => {
                    xData.push(ele.date)
                    yData.push(ele.confirm_add)
                 });
                 //绘制折线图
                 this.$mycharts.line('item',xData,yData)

            },
        
          
        },
        //日期格式处理
        filters:{
            mydate(val){
                if(!val) return '';
                return moment(val).format("HH:mm")
               
            }
        }
    }
</script>



<style lang="less" scoped>
.city{
    margin: 0.2rem;
    color: #333;
    .nav{
        margin-top: .2rem;
        .van-col{
            height: .88rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.1rem;
            background: #eee;
            border-right: 1px solid #fff;
            text-align: center;
        }
    } 
    .content{
        font-size: 0.24rem;
        .van-col{
            min-height: 0.6rem;
            display: flex;
            align-items: center;
            // justify-content: center;
            // border-bottom: 1px solid #eee;
            text-align: center; 
        }
        .line{
            border-bottom: 1px solid #eee;
            .tubiao{
                border: 1px solid #eee;
                border-radius: 0.1rem;
                padding: 0.1rem;
                margin-bottom: 0.1rem;
                h4{
                    margin-bottom: .1rem;
                }
            }
            
        }
        .cityname{
            text-align: left;
            span{
                color: #888;
                padding-left: .08rem;
            }
        }
    }
    .more{
        margin: 0.2rem;
        text-align: center;
    }
}
</style>